<template>
  <div class="laundry">
    <table border="1" style="width: 100%">
      <thead>
        <th colspan="6" style="height: 50px">采购清单{工厂}</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td>姓名:{{ detail?.customer == null ? "" : detail?.customer?.split(",")[0] }}</td>
          <td>地址：{{ detail?.receivingAddress == null ? "" : detail?.receivingAddress }}</td>
          <td>电话：{{ detail?.receivingMobile == null ? "" : detail?.receivingMobile }}</td>
          <td>采购编码：{{ detail?.purchaseOrderNo == null ? "" : detail?.purchaseOrderNo }}</td>
          <td colspan="2">采购备注</td>
        </tr>
        <tr style="height: 60px">
          <td style="text-align: center">客户信息</td>
          <td colspan="2">
            <div>
              {{ detail?.receivingName == null ? "" : detail?.receivingName + "," }}
              {{ detail?.receivingMobile == null ? "" : detail?.receivingMobile + "," }}
              {{ detail?.receivingAreaDetail == null ? "" : detail?.receivingAreaDetail + "," }}
              {{ detail?.receivingAddress == null ? "" : detail?.receivingAddress + "," }}
            </div>
          </td>
          <td></td>
          <td colspan="2"><div class="remarks" v-html="detail?.remark"></div></td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>数量</td>
          <td>件数</td>
        </tr>
        <tr style="height: 80px" v-for="(item, index) in detail?.detailList" :key="index">
          <td style="text-align: center">{{ index + 1 }}</td>
          <td>
            <div>商品名称:{{ item?.productAliasName == null ? "" : item?.productAliasName }}</div>
            <div>规格组合:{{ item.skuSpecification == null ? "" : item.skuSpecification }}</div>
            <div>SKU编码:{{ item?.code }}</div>
            <div>ID:{{ item?.businessSkuId }}</div>
          </td>
          <td style="text-align: center">{{ useCodeArrStore().getDictName("shop_unit", item?.productUnit) }}</td>
          <td style="text-align: center"><div class="remarks" v-html="item?.remark"></div></td>
          <td style="text-align: center">{{ item?.commodityNum }}</td>
          <td style="text-align: center">{{ item?.goodsPartNum }}</td>
        </tr>
      </tbody>
    </table>
    <div class="btn_print">
      <!-- <el-button type="" @click="handelClickBack">返回</el-button> -->
      <el-button type="primary" @click="handelClickPrint">打印</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import SearchForm from "@/components/SearchForm";
// import { Search, RefreshRight } from "@element-plus/icons-vue";
import { detailedList } from "@/apis/order/procure";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// import { ElMessage } from "element-plus";
import useCodeArrStore from "@/store/modules/select";

const purchaseOrderId = ref(route.query.purchaseOrderId);
const list = ref([]);
const detail = ref({});
// const textarea = ref("");
// const activities = ref([
//   {
//     content: "Event start",
//     timestamp: "2018-04-15"
//   },
//   {
//     content: "Approved",
//     timestamp: "2018-04-13"
//   },
//   {
//     content: "Success",
//     timestamp: "2018-04-11"
//   }
// ]);
const redirect = ref("");
const handelClickBack = () => {
  router.go(-1);
};
// 修改备注富文本样式
// const setStyle = () => {
//   setTimeout(() => {
//     const remarks = document.getElementsByClassName("remarks");
//     for (let i = 0; i < remarks.length; i++) {
//       const img = remarks[i].querySelector("img");
//       const video = remarks[i].querySelector("video");
//       if (img) {
//         img.style.width = 130 + "px";
//       }
//       if (video) {
//         video.style.width = 130 + "px";
//       }
//     }
//   }, 1000);
// };
const handelClickPrint = () => {
  // window.print(); // 打印当前窗口
  const printWindow = window.open("", "", "height=800,width=800");
  printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Print Content</title>
          <style>
          table {
              border-collapse: collapse;
            }
            table td,
            table th {
              border: 1px solid black; /* 单元格边框 */
            }
              img{
              width: 50px;}
              video{
              width: 50px;}
          </style>
        </head>
        <body>
      <table border="1" style="width: 100%">
      <thead>
        <th colspan="6" style="height: 50px">采购清单{工厂}</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td>姓名:${detail.value?.customer == null ? "" : detail.value?.customer?.split(",")[0]}</td>
          <td>地址：${detail.value?.receivingAddress == null ? "" : detail.value?.receivingAddress}</td>
          <td>电话：${detail.value?.receivingMobile == null ? "" : detail.value?.receivingMobile}</td>
          <td>采购编码：${detail.value?.purchaseOrderNo == null ? "" : detail.value?.purchaseOrderNo}</td>
          <td colspan="2">采购备注</td>
        </tr>
        <tr>
          <td style="text-align: center">客户信息</td>
          <td colspan="2">
            <div>
            ${detail.value?.receivingName == null ? "" : detail.value?.receivingName + ","}
             ${detail.value?.receivingMobile == null ? "" : detail.value?.receivingMobile + ","}
              ${detail.value?.receivingAreaDetail == null ? "" : detail.value?.receivingAreaDetail + ","}
              ${detail.value?.receivingAddress == null ? "" : detail.value?.receivingAddress + ","}
            </div>
          </td>
          <td></td>
          <td colspan="2">${detail.value?.remark}</td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>数量</td>
          <td>件数</td>
        </tr>
        ${detail.value?.detailList.map((item, index) => {
          return `
             <tr style="height: 80px">
              <td style="text-align: center">${index + 1}</td>
              <td>
                <div>商品名称:${item?.productAliasName}</div>
                <div>
                  规格组合:${item.skuSpecification == null ? "" : item.skuSpecification}
                </div>
                <div>SKU编码:${item?.code}</div>
                <div>ID:${item?.businessSkuId}</div>
              </td>
              <td style="text-align: center">${useCodeArrStore().getDictName("shop_unit", item?.productUnit)}</td>
              <td style="text-align: center">${item?.remark}</td>
              <td style="text-align: center">${item?.commodityNum}</td>
              <td style="text-align: center">${item?.goodsPartNum}</td>
        </tr> 
            `;
        })}
        
      </tbody>
    </table>
        </body>
      </html>
    `);
  printWindow.document.close();
  printWindow.print();
};
// 修改备注富文本样式
// const setStyle = () => {
//   setTimeout(() => {
//     const remarks = document.querySelector(".remarks");
//     console.log(remarks);
//     const imgs = remarks.querySelectorAll("img");
//     const video = remarks.querySelectorAll("video");
//     imgs.forEach(it => {
//       it.style.width = 130 + "px";
//     });
//     video.forEach(it => {
//       it.style.width = 130 + "px";
//     });
//   }, 1000);
// };
// const setStyles = () => {
//   setTimeout(() => {
//     const remarks = document.querySelector(".remarkss");
//     console.log(remarks);
//     const imgs = remarks.querySelectorAll("img");
//     const video = remarks.querySelectorAll("video");
//     imgs.forEach(it => {
//       it.style.width = 130 + "px";
//     });
//     video.forEach(it => {
//       it.style.width = 130 + "px";
//     });
//   }, 1000);
// };
const setStyles = () => {
  setTimeout(() => {
    let imgs = document.querySelectorAll(".remarks img");
    let video = document.querySelectorAll(".remarks video");
    // 遍历这些img元素
    imgs.forEach(function (img) {
      // 设置每个img元素的宽度为100px
      img.style.width = "100px";
    });
    video.forEach(function (video) {
      // 设置每个img元素的宽度为100px
      video.style.width = "100px";
    });
  }, 1000);
};
onMounted(() => {
  redirect.value = route.query.redirect;
  getList();
  setStyles();
});

// const back = () => {
//   if (redirect.value) {
//     const query = route.query;
//     delete query.redirect;
//     router.push({ path: redirect.value, query: query });
//   }
// };
// const getName = (key, value) => {
//   return useCodeArrStore().getDictName(key, value) || "-";
// };

//查询清单列表数据
const getList = () => {
  detailedList({ purchaseOrderId: purchaseOrderId.value }).then(res => {
    if (res.code === 200) {
      detail.value = res.data;
      list.value = res.data.detailList;
      console.log("清单列表===", res.data);
    }
  });
};

//拼接商品的sku规格
// const getSpes = properties => {
//   if (!properties) return "-";
//   const arr = JSON.parse(properties) || [];
//   if (arr.length > 1) {
//     const str = arr.reduce((a, b) => {
//       return a.specificationVal + "+" + b.specificationVal;
//     });
//     return str;
//   } else if (arr.length === 1) {
//     return arr[0].specificationVal;
//   } else {
//     return "-";
//   }
// };
</script>

<style lang="scss" scoped>
.laundry {
  padding: 20px;
}
table {
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black; /* 单元格边框 */
}
.btn_print {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
